<template>
	<div class="orderData2">
		<div class="orderData2_top">
			<div class="orderData2_top_title flex">
				<div @click="orderI=0" class="flex1" :class="orderI==0?'orderData2_top_titleActive':''">分润提现</div>
				<div @click="orderI=1" class="flex1" :class="orderI==1?'orderData2_top_titleActive':''">供应提现</div>
				<div @click="orderI=2" class="flex1" :class="orderI==2?'orderData2_top_titleActive':''">退款提现</div>
			</div>
			<div class="orderData2_top_num">
				<p class="orderData2_top_numP1">提现金额<span>{{orderI==0?'（每次可提现'+withdrawals_low_price+'-'+withdrawals_high_price+'元）':'（无限）'}}</span></p>
				<p class="orderData2_top_numP2 flex"><span>￥</span><input type="number" value="0" class='flex1' v-model="number"  /></p>
			</div>
			<div class="orderData2_top_num2">
				可提余额 {{withdrawals_balance}}元
			</div>
			<div class="orderData2_top_num3 flex">
				<div class="orderData2_top_num3Div flex1">
					<p class="orderData2_top_num3P1">劳务所得税</p>
					<p class="orderData2_top_num3P2">{{num1}}</p>
				</div>
				<div class="orderData2_top_num3Div flex1">
					<p class="orderData2_top_num3P1">转银费用</p>
					<p class="orderData2_top_num3P2">{{num2}}</p>
				</div>
				<div class="orderData2_top_num3Div flex1">
					<p class="orderData2_top_num3P1">到账金额</p>
					<p class="orderData2_top_num3P2">{{num3}}</p>
				</div>
			</div>
		</div>
		<div v-if='radioData.length!=0'>
			<div @click="choseRadio(key)" class="orderData2_radio flex align_center" v-for="(data,key) in radioData" :class="radioI==key?'orderData2_radioActive':''">
				<p class="orderData2_radio_P"></p>
				<div class="flex1 orderData2_radio_div">
					<div class="orderData2_radio_name">
						<span>{{data.bank}}</span>
						<span>{{data.bank_account}}</span>
						<span>{{data.cardholder}}</span>
					</div>
					<div class="orderData2_radio_card">{{data.card_num | carder}}</div>
				</div>
			</div>
		</div>
		<div v-else style="font-size: 1.5rem;line-height: 5rem;text-align: center;">
			暂无账户，请前往账户管理设置
		</div>
		<div class="orderData2_radio_phone flex align_center">
			<div class="orderData2_radio_phoneName">验证码</div>
			<input type="text" class="flex1" placeholder="发送至注册手机号" v-model="sms_code" />
			<v-Code></v-Code>
		</div>
		<el-button round class='orderData2_button' v-if='radioData.length!=0' @click='withdrawals'>立即提现</el-button>
		<el-button round class='orderData2_button' v-else @click='jump'>设置账户</el-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import vCode from '../../common/yzm.vue';
	export default {
		components:{
            vCode
        },
		data: function() {
			return {
				sms_code:'',
				orderI:0,
				radioI:0,
				number:0,
				num1:0,
				num2:0,
				num3:0,
				withdrawals_balance:0,
				radioData:[],
				labor_income_tax:0,
				transfer_fee:0,
				withdrawals_low_price:0,
				withdrawals_high_price:0,
			}
		},
		watch:{
			orderI(){
				if(this.orderI==0){
					this.num1=Math.ceil(this.number*this.labor_income_tax/100);
					this.num2=Math.ceil(this.number*this.transfer_fee/100);
					this.num3=this.number-this.num1-this.num2;
				}
				if(this.orderI==1){
					this.num1=0;
					this.num2=Math.ceil(this.number*this.transfer_fee/100);
					this.num3=this.number-this.num1-this.num2;
				}
				if(this.orderI==2){
					this.num1=0;
					this.num2=0;
					this.num3=this.number-this.num1-this.num2;
				};
				this.get_member_withdrawals_balance();
				
			},
			number(val){
				if(this.orderI==0){
					this.num1=Math.ceil(this.number*this.labor_income_tax/100);
					this.num2=Math.ceil(this.number*this.transfer_fee/100);
					this.num3=this.number-this.num1-this.num2;
				}
				if(this.orderI==1){
					this.num1=0;
					this.num2=Math.ceil(this.number*this.transfer_fee/100);
					this.num3=this.number-this.num1-this.num2;
				}
				if(this.orderI==2){
					this.num1=0;
					this.num2=0;
					this.num3=this.number-this.num1-this.num2;
				}
			}
		},
		filters: {
    		carder(val){
    			val=val.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
				return val;
    		}
    	},
		mounted() {
			this.get_member_withdrawals_balance();
			this.get_withdrawals_range();
			this.get_member_account();

		},
		methods: {
			withdrawals(){
				this.ajax(this, {
					'url': this.defines.withdrawals,
					'type': 'post',
					'data':{
						'member_id':window.uid,
						'withdrawals_price':this.num3,
						'account_id':this.radioData[this.radioI].id,
						'sms_code':this.sms_code
					},

					'callback': data => {
						if(data.data.error_code==0) {
							Toast(data.data.error_msg);
							window.history.go(-1);
						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			get_member_account(){
				const loading=this.$loading({
		          lock: true,
		          text: '加载中',
		          spinner: 'el-icon-loading',
		          background: 'rgba(255, 255, 255, 1)'
		        });
				this.ajax(this, {
					'url': this.defines.get_member_account,
					'type': 'post',
					'data':{
						'member_id':window.uid
					},

					'callback': data => {
						if(data.data.error_code==0) {
							this.radioData=data.data.data;
							loading.close();	

						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			get_withdrawals_range(){
				this.ajax(this, {
					'url': this.defines.get_withdrawals_range,
					'type': 'post',
					'callback': data => {
						if(data.data.error_code==0) {
							this.labor_income_tax=data.data.data.labor_income_tax;
							this.transfer_fee=data.data.data.transfer_fee;
							this.withdrawals_low_price=data.data.data.withdrawals_low_price;
							this.withdrawals_high_price=data.data.data.withdrawals_high_price;
						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			get_member_withdrawals_balance(){
				this.ajax(this, {
					'url': this.defines.get_member_withdrawals_balance,
					'type': 'post',
					'data':{
						'member_id':window.uid,
						'type':this.orderI+1,
					},
					'callback': data => {
						if(data.data.error_code==0) {
							this.withdrawals_balance=data.data.data.withdrawals_balance
						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
			choseRadio(key){
				this.radioI=key
			},
			jump(){
				this.$router.push({
        			path: '/wode/newCard',
//      			query:{
//      				'id':key,
//      			}
				})
			}
		}
	}
</script>

<style scoped>
	.orderData2{
		width: 100%;
	}
	.orderData2_top{
		background: #1a1a1a;
		width: 90%;
		padding: 1rem 5%;
		font-family: "微软雅黑";
	}
	.orderData2_top_title{
		background: #000000;
		width: 100%;
		border-radius: 0.3rem;
		height: 2.8rem;
		
	}
	.orderData2_top_title div{
		font-size: 1.4rem;
		color: #cccccc;
		line-height: 2.8rem;
		text-align: center;
	}
	.orderData2_top_titleActive{
		color: #f7bd40 !important;
	}
	.orderData2_top_num{
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #fff;
		margin-top: 1rem;
		padding: 0 5%;
	}
	.orderData2_top_numP1{
		color: #fff;
		font-size: 1.3rem;
		height: 3rem;
		line-height: 3rem;
	}
	.orderData2_top_numP1 span{
		color: #999999;
		font-size: 1rem;
		display: inline-block;
		line-height: 3rem;
	}
	.orderData2_top_numP2{
		font-size: 3.8rem;
		line-height: 4rem;
		height: 4rem;
		overflow: hidden;
		color: #fff;
		padding-bottom: 1rem;
	}
	.orderData2_top_numP2 span{
		font-size: 3rem;
		
	}
	.orderData2_top_numP2 input{
		font-size: 3.8rem;
		height: 4rem;
		color: #fff;
		display: inline;
		line-height: 4rem;
		background: #1a1a1a;
	}
	.orderData2_top_num2{
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #fff;
		border-top: 0;
		color: #fff;
		height: 2.7rem;
		line-height: 2.7rem;
		font-size: 1.3rem;
		padding: 0 5%;
	}
	.orderData2_top_num3{
		width: 86%;
		box-sizing: border-box;
		border: 1px solid #fff;
		border-top: 0;
		color: #fff;
		line-height: 3rem;
		font-size: 1.3rem;
		margin: 0 7%;
	}
	.orderData2_top_num3Div{
		border-right: 1px solid #fff;
		text-align: center;
	}
	.orderData2_top_num3Div:nth-last-child(1){
		border-right: 0px
	}
	.orderData2_top_num3P1{
		border-bottom: 1px solid #fff;
	}
	.orderData2_radio_P{
		display: inline-block;
		width: 0.6rem;
		height: 0.6rem;
		border: 0.5rem solid #000;
		background: #fff;
		margin:0 1rem;
		border-radius:2rem ;
	}
	.orderData2_radio{
		width: 96%;
		margin: 2rem 0;
		padding: 0 2%;
	}
	.orderData2_radio_div{
		border:0.1rem solid #000;
		border-radius: 0.4rem;
		padding: 1rem;
		box-sizing: border-box;
	}
	.orderData2_radio_name{
		width: 100%;
		
	}
	.orderData2_radio_name span{
		font-size: 1.3rem;
		display: inline-block;
		line-height: 1.5rem;
		margin-right: 1.5rem;
	}
	.orderData2_radio_card{
		font-size: 1.9rem;
		line-height: 2rem;
		margin-top: 0.7rem;
	}
	.orderData2_radioActive .orderData2_radio_P{
		background: #f7bd40;
	}
	.orderData2_radio_phone{
		height: 3rem;
		width: 96%;
		margin-top: 2rem;
		padding: 0 2%;
	}
	.orderData2_radio_phoneName{
		font-size: 1.6rem;
		margin:0 1rem;
	}
	.orderData2_radio_phone input{
		height: 3rem;
		font-size: 1.4rem;
		line-height: 1.6rem;
		background: #e6e6e6;
		color: #000000;
		border-radius: 0.4rem;
		text-indent: 0.5rem;
	}
	.orderData2_radio_phoneCode{
		border-radius: 0.4rem;
		padding: 0 1rem;
		background: #000;
		color: #f7bd40;
		font-size: 1.2rem;
		line-height: 3rem;
		height: 3rem;
		margin-left: 1rem;
	}
	.orderData2_button{
		width: 55%;
		padding: 1rem 0;
		text-align: center;
		color: #f7bd40;
		background: #000;
		display: block;
		margin: 5rem auto 1.5rem auto;
	}
</style>